<template>
	<view class="mainpadding">
		<view class="mainpadding ffffff radius">
			<view class="flexbetween xiahuaxian margin_top">
				<view class="ershiba xiaohei">需求类别</view>
				<u-radio-group v-model="type" placement="row" circle style="flex: none;">
					<u-radio activeColor="#ff470a" :customStyle="{marginRight: '30rpx'}" label="诉求" :name="1"></u-radio>
					<u-radio activeColor="#ff470a" label="建议" :name="2"></u-radio>
				</u-radio-group>
			</view>
			<view class="flexbetween xiahuaxian margin_top" @click="lxShow=true">
				<view class="ershiba xiaohei">问题标签</view>
				<view class="flexright">
					<input type="text" class="textright margin_right" disabled="" placeholder="请选择"
						v-model="fwtype_text">
					<u-icon name="arrow-right" color="#666666"></u-icon>
				</view>
			</view>
			<view class="flexbetween xiahuaxian margin_top">
				<view class="ershiba xiaohei">需求标题</view>
				<input class="textright" placeholder="请输入需求标题" type="text" v-model="title" />
			</view>
			<view class="flexbetween xiahuaxian margin_top">
				<view class="ershiba xiaohei">联系人</view>
				<input class="textright" placeholder="请输入联系人姓名" type="text" v-model="username" />
			</view>
			<view class="flexbetween margin_top">
				<view class="ershiba xiaohei">联系电话</view>
				<input class="textright" placeholder="请输入联系电话" type="number" v-model="mobile" />
			</view>
		</view>
		<view class="mainpadding ffffff radius margin_top">
			<textarea placeholder="请输入详细内容" v-model="des" style="width: 100%;"></textarea>
		</view>
		<view class="mainpadding ffffff radius margin_top">
			<view class="titletext xiaohui">请上传图片</view>
			<view class="flexleft flex_wrap">
				<view class="flexcenter tpbox " v-for="(ite,ind) in images_arr" :key="ind">
					<view class="tjtp">
						<image class="tjtpimg" :src="ite" mode=""></image>
						<view class="deleteimg" @click="deleteimg(ind,images,images_arr)"></view>
					</view>
				</view>
				<view class="flexcenter tpbox " v-if="images_arr.length<4" @click="uploadImg(4,images,images_arr)">
					<image class="tjtp" src="@/static/image/system/upimg.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="gudingdb mainpadding">
			<view class="bigbtn" @click="submit">提交</view>
		</view>
		<u-picker :show="lxShow" :columns="lxList" title="选择类型" @cancel="lxShow=false" @confirm="lxconfirm"
			keyName="name"></u-picker>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				fwtype_text: "",
				fwtype_id: "",
				des: "",
				images: [],
				images_arr: [],
				mobile: "",
				username: "",
				title:"",
				lxList: [],
				lxShow: false,
				type:1,
			}
		},
		onLoad() {
			this.getfuwl() //场馆分类/项目
		},
		methods: {
			submit() {
				if (this.fwtype_id == "") {
					httpRequest.toast("请选择问题标签")
					return false
				}
				if (this.title == "") {
					httpRequest.toast("请选择需求标题")
					return false
				}
				if (this.username == "") {
					httpRequest.toast("请输入联系人")
					return false
				}
				if (this.mobile == "") {
					httpRequest.toast("请输入联系电话")
					return false
				}
				if (this.des == "") {
					httpRequest.toast("请输入详细电话")
					return false
				}
				httpRequest.request('/api/user/addSj', 'GET', {
					des: this.des,
					images: this.images.join(),
					fwtype_id: this.fwtype_id,
					mobile: this.mobile,
					username: this.username,
					title:this.title,
					type:this.type
				}, false, false, true).then(res => {
					httpRequest.toast(res.msg)
					if (res.code == 1) {
						setTimeout(() => {
							uni.navigateBack(1)
						}, 1000)
					}
				})
			},
			deleteimg(index, upImgs, upImgs_text) {
				upImgs.splice(index, 1)
				upImgs_text.splice(index, 1)
			},
			uploadImg(value, upImgs, upImgs_text) {
				let _this = this;
				let num = 1
				if (value > 2) {
					num = Number(value) - upImgs.length;
					if (num <= 0) {
						return false;
					}
				}
				uni.showActionSheet({
					itemList: ['相机', '相册'],
					success: function(res) {
						// 选择相机走0
						if (res.tapIndex == 0) {
							httpRequest.chooseImage(num, ['camera']).then(res => {
								for (var i = 0; i < res.length; i++) {
									_this.uploadImageService(res[i], upImgs, upImgs_text)
								}
							}).catch(err => {});
						}
						// 选择相册走1
						if (res.tapIndex == 1) {
							httpRequest.chooseImage(num, ['album']).then(res => {
								for (var i = 0; i < res.length; i++) {
									_this.uploadImageService(res[i], upImgs, upImgs_text)
								}
							}).catch(err => {});
						}
					},
					fail: function(res) {}
				});
			},
			uploadImageService(url, upImg, upImgs_text) {
				let _this = this;
				httpRequest.uploadFile('/api/common/upload', url).then(res => {
					let image_item = res.fullurl;
					upImg.push(res.url)
					upImgs_text.push(image_item)
				}).catch(err => {});
			},
			getfuwl() {
				httpRequest.request('/api/index/fwtypeIndex', 'POST', {}, false, false, true).then(res => {
					this.lxList.push(res.data)
				})
			},
			lxconfirm(e) {
				this.fwtype_id = e.value[0].id
				this.fwtype_text = e.value[0].name
				this.lxShow = false
			},
		}
	}
</script>

<style lang="scss" scoped>
	.shanchu {
		width: 25rpx;
		height: 25rpx;
		position: absolute;
		top: 0;
		right: 0;
	}
</style>